DOM

Behind the scenes: How the browser renders a web page?

What is DOM (Document Object Model)?

乍看之下, DOM 看似一個複雜的專有名詞, 不過從其三個名詞拆解來看是不難理解的

-Document: 我們寫的 Markdown
-Object (ex. Tag): 在 document 裡的 物件 (objects), like , ,
-Model: document 在 browser 運行的架構

• DOM 是使用 Javascript 處理網頁畫面的一個 key concept

• Define the components of HTML documents as object, the objects would be constructed as a tree, 以下是上述 markup 的 DOM Tree
  

• 簡單來說, DOM 代表 page contents, 讓我們可以對 document 的內容, 架構,和樣式做更改, 而 DOM 的 root 就是 document

• 或許你也曾看過其他解釋說 DOM document 是由 nodes 或者是 objects 組成的, 不過其實 nodes 和 objects 他們是同樣的東西, 我們之後會再討論各個不同種類的 node

• 另外, 我想在這邊介紹一個好用的網站, 在這個網站, 你可以清楚的去看到你寫出的 page contents 的 DOM Tree 是呈現什麼樣子: https://software.hixie.ch/utilities/js/live-dom-viewer/

每當我們開啟任何瀏覽器的同時, 最上層的動態物件結構就是 window object

讓我們來看看 DOM 如何讓網頁和 users 互動起來吧

Web API:

Window: 在 Javascript 中是內建的全域物件, 代表瀏覽器視窗本身
以下列出 window object 主要會提供的幾個特性:

• history: 可操作瀏覽器歷史紀錄, 比如可應用於消費者在網購的流程, 同時電商透過蒐集消費者的網頁歷史瀏覽紀錄, 來分析消費者的購物喜好, 去評估其銷售方法和策略
  • window.history

    • back() → 在瀏覽器介面中的回到”上一頁”
      Example: 在介面中設有一個 button 可以讓 user “返回上一頁”
      

    • forward() → 在瀏覽器介面中的去到”下一頁”
      Example: 在介面中設有一個 button可以讓 user “去到下一頁”
      // ```打三個這個可以出現寫程式的 block
      console.log('hello')

    - go() → 在瀏覽器介面中選擇去到”特定的頁面”
     Example: 在介面中設有一個 button可以讓 user 直接“去到指定的頁面”
     

• location:
  • window.location → 得知 document 關於網頁 url 的資訊
  • Example: window.location.href → 得知目前所在網頁的 url

• screen:
  • window.screen → 查看與瀏覽器螢幕有關的屬性
  • Example: 取得user的螢幕解析度

• global object:
  • Example: 在 Javascript 中, window 可視為 global object

The HTML DOM Tree of Objects:
The web broswer parses HTML to DOM tree step by step…

認識到 DOM Tree 與其重要組成元素 nodes 後, 那麼 nodes 彼此互相的關係與如何 select 特定的 nodes 也是一個重要的課題, 此類的問題也曾經是 Facebook 的 onsite interview question 呢

Node 與 Node 之間的關係:

• Parent and Child:
  • 上層 Node: Parent (父親節點)
  • 下層 Node: Child (兒子節點)
• Siblings:

  • 兄弟姊妹關係節點, 同一層級的 Node, 分為 Previous 和 Next 兩種關係
    

  • 如何搜尋節點們?

上述方法是使用找出 node 的 index 或是 nextElementSibling / previousElementSibling /firstElementChild 去搜尋想要的 node, 不過顯得比較沒效率, 因此我們將會在 Day 10 分享 DOM 搜尋 node 比較快速有效率的方法: getElement, querySelector

Node 的種類:

• Document: HTML document 的最上層
• Element: all HTML tags, 包括我們所熟悉的 , , , …
• Text: String, 簡單來說就是被 HTML tag (Element) 包起來的 text, like Say Hello! , Say Hello! 即是所謂的 Text
• Attribute: 描述 Element 的特性, like class, id, href…